<template>
  <div class="title">热门课程页面</div>
  <div class="main-classes">
    <div class="classes-container">
      <div class="classes" v-for="funClass in funClasses" :key="funClass.name">
        <div>
          <a :href="funClass.url" target="_blank">
            <div class="news-img">
              <img :src="funClass.picture" width="300" height="130" />
            </div>
            <div class="news-panel">
              <strong>{{ funClass.name }}</strong>
              <p class="detail">
                <span>
                  {{ funClass.detail }}
                </span>
                <span>[详细]</span>
              </p>
              <p class="read-push">
                阅读 <span>120</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：
                <span> 2022-12-10 </span>
              </p>
            </div>
          </a>
        </div>
      </div>

      <!-- <div class="classes">
        <div>
          <a
            href="https://www.icourse163.org/course/ZJU-199001"
            target="_blank"
          >
            <div class="news-img">
              <img src="../img/C语言.jpg" width="300" height="130" />
            </div>
            <div class="news-panel">
              <strong>程序设计入门---C语言</strong>
              <p class="detail">
                <span>
                  本课程是零基础的编程入门课，是后续的操作系统、编译原理、体系结构等课程的基石。完成本课程之后，就能具有初步的运用C语言编写程序的能力。
                </span>
                <span>[详细]</span>
              </p>
              <p class="read-push">
                阅读 <span>120</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                  >2022-12-10</span
                >
              </p>
            </div>
          </a>
        </div>
      </div>

      <div class="classes">
        <div>
          <a href="https://www.icourse163.org/course/NKU-1205696807">
            <div class="news-img">
              <img src="../img/Python.jpg" width="300" height="130" />
            </div>
            <div class="news-panel">
              <strong>Python编程基础</strong>
              <p class="detail">
                <span
                  >在本课程的讲授中，每一个知识点都提供了相关程序实例，希望大家能更好地掌握Python程序的编写方法，并基本具备应用Python解决实际应用问题的能力。</span
                >
                <span>[详细]</span>
              </p>
              <p class="read-push">
                阅读 <span>120</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                  >2022-12-10</span
                >
              </p>
            </div>
          </a>
        </div>
      </div>

      <div class="classes">
        <div>
          <a href="https://www.icourse163.org/course/ZJU-1001542001">
            <div class="news-img">
              <img src="../img/Java.jpg" width="300" height="130" />
            </div>
            <div class="news-panel">
              <strong
                ><a href="https://www.icourse163.org/course/ZJU-1001542001"
                  >面向对象程序设计——Java语言</a
                ></strong
              >
              <p class="detail">
                <span
                  >Java语言是一种面向对象语言，是业界使用最为广泛的语言，十二年前就占据了1/4的编程语言份额，到今天仍然以1/5的比例站在编程语言排行榜的前列。</span
                >
                <a href="https://www.icourse163.org/course/ZJU-1001542001"
                  >[详细]</a
                >
              </p>
              <p class="read-push">
                阅读 <span>112</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                  >2022-01-30</span
                >
              </p>
            </div>
          </a>
        </div>
      </div>

      <div class="classes">
        <div>
          <div class="news-img">
            <a
              href="https://www.icourse163.org/course/USTB-1206407811?from=searchPage"
              ><img src="../img/离散数学.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a
                href="https://www.icourse163.org/course/USTB-1206407811?from=searchPage"
                >离散数学</a
              ></strong
            >
            <p class="detail">
              <span
                >离散数学是研究离散量的结构及其相互关系的数学学科，是现代数学的一个重要分支，也是计算机科学的基础核心学科。</span
              ><a
                href="https://www.icourse163.org/course/USTB-1206407811?from=searchPage"
                >[详细]</a
              >
            </p>
            <p class="read-push">
              阅读 <span>3131</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="classes">
        <div>
          <div class="news-img">
            <a href="https://www.icourse163.org/course/HUST-1003159001"
              ><img src="../img/计算机组成原理.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a href="https://www.icourse163.org/course/HUST-1003159001"
                >计算机组成原理</a
              ></strong
            >
            <p class="detail">
              <span
                >“计算机组成原理”是一门理论性、工程性、技术性和实践性都很强的核心专业基础课程，在计算机学科系列课程中处于承上启下的作用。 </span
              ><a href="https://www.icourse163.org/course/HUST-1003159001"
                >[详细]</a
              >
            </p>
            <p class="read-push">
              阅读 <span>112</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="classes">
        <div>
          <div class="news-img">
            <a href="https://www.icourse163.org/course/ZJU-93001"
              ><img src="../img/数据结构.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a href="https://www.icourse163.org/course/ZJU-93001"
                >数据结构</a
              ></strong
            >
            <p class="detail">
              <span
                >本课程将介绍并探讨有关数据组织、算法设计、时间和空间效率的概念和通用分析方法</span
              ><a href="https://www.icourse163.org/course/ZJU-93001">[详细]</a>
            </p>
            <p class="read-push">
              阅读 <span>3874</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="classes">
        <div>
          <div class="news-img">
            <a href="https://www.icourse163.org/course/BNU-1002842007"
              ><img src="../img/数据库原理.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a href="https://www.icourse163.org/course/BNU-1002842007"
                >数据库原理</a
              ></strong
            >
            <p class="detail">
              <span
                >当前已经是大数据时代，数据库课程不能没有大数据管理，这是技术发展的呼唤，也是提高教学质量、加强人才技术素质的迫切要求。</span
              ><a href="https://www.icourse163.org/course/BNU-1002842007"
                >[详细]</a
              >
            </p>
            <p class="read-push">
              阅读 <span>3393</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="classes">
        <div>
          <div class="news-img">
            <a href="https://www.icourse163.org/course/HIT-437006"
              ><img src="../img/计算机专业导论.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a href="https://www.icourse163.org/course/HIT-437006"
                >计算机专业导论</a
              ></strong
            >
            <p class="detail">
              <span
                >计算机专业导论是你进入大学学习计算机科学与技术学科的第一门课程，既是计算机专业的入门课程，又是计算机专业学习的指南。</span
              ><a href="https://www.icourse163.org/course/HIT-437006">[详细]</a>
            </p>
            <p class="read-push">
              阅读 <span>4087</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="classes">
        <div>
          <div class="news-img">
            <a href="https://www.icourse163.org/course/NUDT-1461782176"
              ><img src="../img/数据挖掘.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a href="https://www.icourse163.org/course/NUDT-1461782176"
                >数据挖掘</a
              ></strong
            >
            <p class="detail">
              <span
                >数据挖掘是近十几年来大数据、人工智能行业飞速发展最重要的驱动技术之一，当前大数据分析几乎都离不开数据挖掘技术。</span
              ><a href="https://www.icourse163.org/course/NUDT-1461782176"
                >[详细]</a
              >
            </p>
            <p class="read-push">
              阅读 <span>120</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="classes">
        <div>
          <div class="news-img">
            <a href="https://www.icourse163.org/course/NJAU-1001752039"
              ><img src="../img/计算机网络.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a href="https://www.icourse163.org/course/NJAU-1001752039"
                >计算机网络</a
              ></strong
            >
            <p class="detail">
              <span
                >课程主要介绍计算机网络的基本概念，基本理论和基本方法。通过学习计算机网络基础理论、实用技术和掌握计算机网络基本操作增强技能，提高大学生的社会竞争力。</span
              ><a href="https://www.icourse163.org/course/NJAU-1001752039"
                >[详细]</a
              >
            </p>
            <p class="read-push">
              阅读 <span>835</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="classes">
        <div>
          <div class="news-img">
            <a href="https://www.icourse163.org/course/NJU-1001571004"
              ><img src="../img/操作系统.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a href="https://www.icourse163.org/course/NJU-1001571004"
                >操作系统</a
              ></strong
            >
            <p class="detail">
              <span
                >操作系统是计算机系统的灵魂，它管理计算机系统的资源，提供友善的人机互动</span
              ><a href="https://www.icourse163.org/course/NJU-1001571004"
                >[详细]</a
              >
            </p>
            <p class="read-push">
              阅读 <span>112</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="classes">
        <div>
          <div class="news-img">
            <a href="https://www.icourse163.org/course/HUST-1003636001"
              ><img src="../img/计算机图形学.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a href="https://www.icourse163.org/course/HUST-1003636001"
                >计算机图形学</a
              ></strong
            >
            <p class="detail">
              <span
                >计算机图形学是研究怎样利用计算机来显示、生成和处理图形的原理、方法和技术的一门学科。</span
              ><a href="https://www.icourse163.org/course/HUST-1003636001"
                >[详细]</a
              >
            </p>
            <p class="read-push">
              阅读 <span>3131</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="classes">
        <div>
          <div class="news-img">
            <a href="https://www.icourse163.org/course/DUT-1002607070"
              ><img src="../img/嵌入式软件设计.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a href="https://www.icourse163.org/course/DUT-1002607070"
                >嵌入式软件设计</a
              ></strong
            >
            <p class="detail">
              <span
                >嵌入式软件设计是计算机、软件工程等学科的专业方向课，是一门实践性、技术性很强的重要课程。</span
              ><a href="https://www.icourse163.org/course/DUT-1002607070"
                >[详细]</a
              >
            </p>
            <p class="read-push">
              阅读 <span>112</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="classes">
        <div>
          <div class="news-img">
            <a href="https://www.icourse163.org/course/ZJU-232005"
              ><img src="../img/概率论与数理统计.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a href="https://www.icourse163.org/course/ZJU-232005"
                >概率论与数理统计</a
              ></strong
            >
            <p class="detail">
              <span
                >概率论与数理统计是研究"随机现象"数量规律的一门学科。概率论与数理统计的应用非常广泛，几乎遍及自然科学，社会科学，工程技术，军事科学及生活实际等各领域。</span
              ><a href="https://www.icourse163.org/course/ZJU-232005">[详细]</a>
            </p>
            <p class="read-push">
              阅读 <span>3874</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="classes">
        <div>
          <div class="news-img">
            <a href="https://www.icourse163.org/course/HZAU-1001658002"
              ><img src="../img/数学建模.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a href="https://www.icourse163.org/course/HZAU-1001658002"
                >数学建模</a
              ></strong
            >
            <p class="detail">
              <span
                >还在羡慕别人的国际级、国家级大奖吗?快来学习数学建模吧，我们可以帮你圆梦！</span
              ><a href="https://www.icourse163.org/course/HZAU-1001658002"
                >[详细]</a
              >
            </p>
            <p class="read-push">
              阅读 <span>3393</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="classes">
        <div>
          <div class="news-img">
            <a href="https://www.icourse163.org/course/HIT-10001"
              ><img src="../img/大数据算法.jpg" width="300" height="130"
            /></a>
          </div>
          <div class="news-panel">
            <strong
              ><a href="https://www.icourse163.org/course/HIT-10001"
                >大数据算法</a
              ></strong
            >
            <p class="detail">
              <span
                >大数据在不论在研究还是工程领域都是热点之一，算法是大数据管理与计算的核心主题。本课程试图简要介绍大数据计算中涉及到的基本算法设计方法。</span
              ><a href="https://www.icourse163.org/course/HIT-10001">[详细]</a>
            </p>
            <p class="read-push">
              阅读 <span>4087</span>&nbsp;&nbsp;&nbsp;&nbsp;发布时间：<span
                >2022-01-30</span
              >
            </p>
          </div>
        </div>
      </div> -->
    </div>
    <div id="newsPage"></div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      funClasses: [],
    };
  },
  mounted() {
    axios({
      method: "get",
      url: "/spring-boot/course/manager/1",
    }).then((data) => {
      this.funClasses = data.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.main-classes {
  background-color: aliceblue;
  .classes-container {
    .classes {
      height: 300px;
      margin-bottom: 20px;
      border-bottom: 1px solid rgb(238, 224, 224);
    }
  }
}
.title {
  text-align: left;
  color: rgba(27, 2, 2, 0.5);
}
</style>
